<template>
 
    <div class="tabbar-item" @click="tabbarItemClick">
        <div v-if="!isActive">
            <slot name="item-icon">
                <!-- <img src="../../assets/img/tb1.png" alt=""> -->
            </slot>
        </div>
        
        <div v-else>
            <slot  name="item-icon-active">
                <!-- <img src="../../assets/img/tb1.png" alt=""> -->
            </slot>
        </div>
        

        <!-- item-text插槽 -->
        <div :style="activeStyle">
        <slot name="item-text">
                首页
        </slot>
        </div>
        
    </div>
  
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

export default {
  name: 'tabbaritem',
  components: {
    //PageHeaderLayout,
  },
  props: {
      path:String,
      activeColor:{
          type:String,
          default:'red'
      }
  },
  // 定义属性
  data() {
    return {
    //   isActive:true
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
      isActive(){
          console.log(this.$route.path);
          
          return this.$route.path.indexOf(this.path) !== -1
      },
      activeStyle(){
          return this.isActive ?{color:this.activeColor} : {}
      }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    tabbarItemClick(){
        console.log('itemclick');
        this.$router.replace(this.path)
        
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .tabbar-item{
      flex:1;
      text-align: center;
      height: 49px;
      img {
          width: 20px;
          height: 20px;
      }
  }
  .active{
      color: red;
  }
</style>